<template>
  <div class="box">
    <!-- 顶部 -->
    <!-- <div class="top">
      <div class="pc">
        <div class="pc_top">全场换购</div>
        <div class="pc_bom">已满0.01元,可选择10件商品换购 <span class="span">去换购 ></span></div>
      </div>
      <div class="top_con">
        
      </div>
    </div> -->
    <!-- 身体 -->
    <div class="body" v-for="item in 3" :key="item">
        <div class="pc">
          <div class="pc_top"><span class="span1">√</span>99元包邮</div>
          <div class="pc_bom">还差6.10元包邮 <span class="span">去凑单 ></span></div>
        </div>
        <div class="pc">
          <div class="pc_top2"><span class="span2">满赠</span>再购6.1元立享,满99元领取赠品</div>
          <div class="pc_bom"><span class="span">已领完 ></span></div>
        </div>
        <div class="con">
          <div class="dui">√</div>
          <div class="tu">
            <image class="img" src="https://yanxuan-item.nosdn.127.net/deb33cc6fcbf4bd27e7a89412cd1ce72.png?imageView&quality=35&thumbnail=146x146" mode="scaleToFill"/>
          </div>
          <div class="zi">
            <div class="zi_top"><span class="span3">囤货特价</span>更韧更吸水 真是好啊</div>
            <span class="zi_cen">[以现状] 很高桂枝30卷</span>
            <div class="zi_bom">
              <div>￥118 <span class="span4">优惠价￥90.2</span></div>
              <div class="cheng">×1</div>
            </div>
          </div>
        </div>
        <div class="no"><span class="span5">!</span>不可用卷</div>
    </div>
    <!-- 底部固定栏 -->
    <div class="bottom">
      <div class="bot_top">
        <div>开通Pro会员,本单免邮</div>
        <div class="hong">立即开通></div>
      </div>
      <div class="bot_bom">
        <div class="dui">√</div>
        <div>全选</div>
        <div class="wz">
          <div class="wz_top">合计:￥100.9</div>
          <div class="wz_bom">以优惠:￥24.1,查看详情</div>
        </div>
        <div class="js">结算<span class="span6">(1)</span></div>
      </div>
    </div>
  </div>

</template>

<script setup lang="ts">
//引入uni相关
import {onShow} from '@dcloudio/uni-app'
//引入vue相关
import {ref} from 'vue'


//生命周期钩子
//页面展示
onShow(()=>{
  let token = uni.getStorageSync("TOKEN")
  if(token){
    
  }else{
    uni.navigateTo({
    url:`/pages/login/login`
  })
  }
})



</script>

<style scoped lang='less'>
.box{
  width: 100%;
  background: #eee;
  overflow: hidden;
  /* 顶部 */
  .top{
    width: 95%;
    height: 250rpx;
    background: white;
    margin: 100rpx auto 20rpx;
    border-radius: 20rpx;
    padding: 30rpx;
    box-sizing: border-box;
    .pc{
      display: flex;
      justify-content: space-between;
      .pc_top{
        font-weight: bold;
      }
      .pc_bom{
        font-size: 25rpx;
        .span{
          margin-left: 10rpx;
          color: rgb(239, 41, 41);
        }
      }
    }
    .top_con{
      width: 100%;
      .img{
        width: 100%;
      }
    }
  }
  /* 身体 */
  .body{
     width: 95%;
    height: 450rpx;
    background: white;
    margin: 30rpx auto;
    border-radius: 20rpx;
    padding: 30rpx;
    box-sizing: border-box;
    .pc{
      margin: 20rpx auto;
      display: flex;
      justify-content: space-between;
      .pc_top{
        font-weight: bold;
        .span1{
          padding: 5rpx 15rpx;
          background: red;
          color: white;
          border-radius: 50%;
          margin-right: 20rpx;
          margin-left: 10rpx;
        }
      }
      .pc_top2{
        font-weight: normal;
        font-size: 25rpx;
        .span2{
          padding: 5rpx 10rpx;
          background: red;
          color: white;
          border-radius: 20rpx;
          margin-right: 10rpx;
          margin-left: 10rpx;
        }
      }
      .pc_bom{
        font-size: 25rpx;
        .span{
          color: rgb(239, 41, 41);
          margin-left: 10rpx;
        }
      }
    }
    .con{
      width: 100%;
      display: flex;
      justify-content: space-around;
      align-items: center;
      .dui{
        width: 40rpx;
        height: 40rpx;
        text-align: center;
        line-height: 40rpx;
        background: red;
        border-radius: 50%;
        color: #fff;

      }
      .tu{
          width: 200rpx;
          height: 200rpx;
          .img{
            width: 100%;
            height: 100%;
          }
        }
      .zi{
        width: 50%;
        .zi_top{
          font-size: 30rpx;
          white-space: nowrap; 
          overflow: hidden; 
          text-overflow: ellipsis; 
          .span3{
            color: red;
            margin-right: 20rpx;
          }
        }
        .zi_cen{
          font-size: 20rpx;
          background: #eee;
          padding: 5rpx 20rpx;
          border-radius: 10rpx;
        }
        .zi_bom{
          font-weight: bold;
          display: flex;
          justify-content: space-between;
          .span4{
            font-size: 24rpx;
            color: red;
          }
          .cheng{
            width: 60rpx;
            height: 50rpx;
            border: 1px solid #d7d6d6;
            text-align: center;
            line-height: 50rpx;
            border-radius: 50rpx;
          }
        }
      }
    }
    .no{
      font-size: 20rpx;
      margin: 10rpx 30rpx;
      .span5{
        border: 1px solid black;
        padding: 0 10rpx;
        border-radius: 50%;
      }
    }
  }
  //
  .bottom{
    position: fixed;
    bottom: 0;
    width: 100%;
    margin-top: 50rpx;
    .bot_top{
      width: 100%;
      height: 90rpx;
      background: rgb(255,224,189);
      display: flex;
      justify-content: space-between;
      padding: 0 30rpx;
      align-items: center;
      border-radius: 20rpx 20rpx 0 0;
      box-sizing: border-box;
      .hong{
        color: red;
        font-size: 25rpx;
      }
    }
    .bot_bom{
      width: 100%;
      background: #fff;
      display: flex;
      justify-content: space-between;
      padding: 20rpx 30rpx;
      align-items: center;
      box-sizing: border-box;
      .dui{
          padding: 5rpx 15rpx;
          background: red;
          color: white;
          border-radius: 50%;
          margin-right: 20rpx;
      }
      .wz{
        width: 40%;
        // background: wheat;
        text-align: right;
        .wz_top{
          width: 100%;
          color: red;
          
        }
        .wz_bom{
          font-size: 25rpx;
        }
      }
      .js{
        width: 200rpx;
        height: 80rpx;
        background: red;
        color: #fff;
        text-align: center;
        line-height: 80rpx;
        border-radius: 80rpx;
        .span6{
          font-size: 25rpx;
          // line-height: 80rpx;
        }
      }
    }
  }
}
</style>